﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="jQuery, Switchable, Tabs, Slide, Scrollable, UI, Plugin, Ajax" />
	<meta name="description" content="jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件。它有简单易用的API、可灵活配置的Configuration，支持自定义Effect，支持自主开发Plugin。" />
	<link href="../../css/css.css" rel="stylesheet" type="text/css" />
	<link href="../../css/demo.css" rel="stylesheet" type="text/css" />

	<!-- syntaxhighlighter -->
	<link href="../../../asset/styles/shCore.css" rel="stylesheet" type="text/css" />
	<link href="../../../asset/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

	<link href="/asset/favicon.png" rel="icon" type="image/png" />
	<title>Demos | jQuery.Switchable</title>
	<script type="text/javascript" src="../../../asset/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.switchable[all].min.js"></script>

	<!-- syntaxhighlighter -->
	<script type="text/javascript" src="../../../asset/scripts/shCore.js"></script>
	<script type="text/javascript" src="../../../asset/scripts/shBrushJScript.js"></script>

	<script type="text/javascript">
	$(function(){
		/* Autoplay plugin */
		window.api = $("#trigger1").switchable("#panel1 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3,
			circular: true
		}).autoplay({ api: true });
		
		$("#next1").click(function(){
			api.next();
		});
		$("#prev1").click(function(){
			api.prev();
		});
		
		
		/* Carousel plugin */
		$("#trigger2").switchable("#panel2 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).carousel();
		
		var api2 = $("#trigger2").switchable();
		$("#next2").click(function(){
			api2.next();
		});
		$("#prev2").click(function(){
			api2.prev();
		});
		
		
		/* Mousewheel plugin */
		$("#trigger3").switchable("#panel3 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).mousewheel();
		
		var api3 = $("#trigger3").switchable();
		$("#next3").click(function(){
			api3.next();
		});
		$("#prev3").click(function(){
			api3.prev();
		});
		
		
		/* Chaining plugins */
		$("#trigger4").switchable("#panel4 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).autoplay().carousel().mousewheel();
		
		var api4 = $("#trigger4").switchable();
		$("#next4").click(function(){
			api4.next();
		});
		$("#prev4").click(function(){
			api4.prev();
		});
	});
	
	// syntaxhighlighter
	SyntaxHighlighter.config.clipboardSwf = "../asset/scripts/clipboard.swf";
	SyntaxHighlighter.all();
	</script>
</head>

<body>
<div id="header">
	<div id="logo"></div>
	<div id="nav">
		<a href="../../../switchable">Home</a>
		<a href="../../download.html">Download</a>
		<a href="../" class="current">Demos</a>
		<a href="http://t.sina.com.cn/jsw0528" title="Follow me on Sina" class="sina" target="_blank">Sina</a>
		<a href="http://twitter.com/jsw0528" title="Follow me on Twitter" class="twitter" target="_blank">Twitter</a>
	</div>
</div>

<div class="wrap clearfix">
	<h2>Plugins in action</h2>
	<p>Here are the available plugins in action:</p>
	<ol class="list">
		<li><a href="#autoplay">autoplay</a></li>
		<li><a href="#carousel">carousel</a></li>
		<li><a href="#mousewheel">mousewheel</a></li>
	</ol>
	<p>You can additionally see a demo where all the plugins are <a href="#chain">used together</a>.</p>
	
	<h2 id="autoplay">Autoplay plugin:</h2>

	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next1" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev1" class="prev"></a>
		<div id="trigger1" class="scrollable-trigger"></div>
	</div>
	<div id="panel1" class="scrollable-panel">
		<div class="clearfix">
			<!-- 1~3 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1uRBrXe0XXXXXXXXX-120-60.gif" />
			<img src="http://img02.taobaocdn.com/tps/i2/T1bQVrXaVpXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1l7FrXgNvXXXXXXXX-120-60.gif" />
			<!-- 4~6 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1ikRrXglqXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1XYRsXipXXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1MQ8rXe8kXXXXXXXX-120-60.gif" />
			<!-- 7~9 -->
			<img src="http://img05.taobaocdn.com/tps/i5/T1mOJsXXdEXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1bkNrXb8sXXXXXXXX-120-60.gif" />
			<img src="http://img07.taobaocdn.com/tps/i7/T1Ck8rXiXkXXXXXXXX-120-60.gif" />
		</div>
	</div>
	<div class="ctrl" style="width:437px;">
		<button class="play" onClick="api.play();" title="Play"></button>
		<button class="pause" onClick="api.pause();" title="Pause"></button>
		<button class="stop" onClick="api.stop();" title="Stop"></button>
	</div>
	
	<h3>jQuery Code:</h3>
	<pre class="brush: js;">
	$(function(){
		window.api = $("#trigger1").switchable("#panel1 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3,
			circular: true
		}).autoplay({ api: true });
		
		$("#next1").click(function(){
			api.next();
		});
		$("#prev1").click(function(){
			api.prev();
		});
	});
	</pre>
	
	<h2 id="carousel">Carousel plugin:</h2>

	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next2" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev2" class="prev"></a>
		<div id="trigger2" class="scrollable-trigger"></div>
	</div>
	<div id="panel2" class="scrollable-panel">
		<div class="clearfix">
			<!-- 1~3 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1uRBrXe0XXXXXXXXX-120-60.gif" />
			<img src="http://img02.taobaocdn.com/tps/i2/T1bQVrXaVpXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1l7FrXgNvXXXXXXXX-120-60.gif" />
			<!-- 4~6 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1ikRrXglqXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1XYRsXipXXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1MQ8rXe8kXXXXXXXX-120-60.gif" />
			<!-- 7~9 -->
			<img src="http://img05.taobaocdn.com/tps/i5/T1mOJsXXdEXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1bkNrXb8sXXXXXXXX-120-60.gif" />
			<img src="http://img07.taobaocdn.com/tps/i7/T1Ck8rXiXkXXXXXXXX-120-60.gif" />
		</div>
	</div>
	
	<h3>jQuery Code:</h3>
	<pre class="brush: js;">
	$(function(){
		$("#trigger2").switchable("#panel2 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).carousel();
		
		var api2 = $("#trigger2").switchable();
		$("#next2").click(function(){
			api2.next();
		});
		$("#prev2").click(function(){
			api2.prev();
		});
	});
	</pre>
	
	<h2 id="mousewheel">Mousewheel plugin:</h2>

	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next3" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev3" class="prev"></a>
		<div id="trigger3" class="scrollable-trigger"></div>
	</div>
	<div id="panel3" class="scrollable-panel">
		<div class="clearfix">
			<!-- 1~3 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1uRBrXe0XXXXXXXXX-120-60.gif" />
			<img src="http://img02.taobaocdn.com/tps/i2/T1bQVrXaVpXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1l7FrXgNvXXXXXXXX-120-60.gif" />
			<!-- 4~6 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1ikRrXglqXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1XYRsXipXXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1MQ8rXe8kXXXXXXXX-120-60.gif" />
			<!-- 7~9 -->
			<img src="http://img05.taobaocdn.com/tps/i5/T1mOJsXXdEXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1bkNrXb8sXXXXXXXX-120-60.gif" />
			<img src="http://img07.taobaocdn.com/tps/i7/T1Ck8rXiXkXXXXXXXX-120-60.gif" />
		</div>
	</div>
	
	<h3>jQuery Code:</h3>
	<pre class="brush: js;">
	$(function(){
		$("#trigger3").switchable("#panel3 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).mousewheel();
		
		var api3 = $("#trigger3").switchable();
		$("#next3").click(function(){
			api3.next();
		});
		$("#prev3").click(function(){
			api3.prev();
		});
	});
	</pre>
	
	<h2 id="chain">Chaining plugins:</h2>

	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next4" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev4" class="prev"></a>
		<div id="trigger4" class="scrollable-trigger"></div>
	</div>
	<div id="panel4" class="scrollable-panel">
		<div class="clearfix">
			<!-- 1~3 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1uRBrXe0XXXXXXXXX-120-60.gif" />
			<img src="http://img02.taobaocdn.com/tps/i2/T1bQVrXaVpXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1l7FrXgNvXXXXXXXX-120-60.gif" />
			<!-- 4~6 -->
			<img src="http://img04.taobaocdn.com/tps/i4/T1ikRrXglqXXXXXXXX-120-60.gif" />
			<img src="http://img01.taobaocdn.com/tps/i1/T1XYRsXipXXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1MQ8rXe8kXXXXXXXX-120-60.gif" />
			<!-- 7~9 -->
			<img src="http://img05.taobaocdn.com/tps/i5/T1mOJsXXdEXXXXXXXX-120-60.gif" />
			<img src="http://img06.taobaocdn.com/tps/i6/T1bkNrXb8sXXXXXXXX-120-60.gif" />
			<img src="http://img07.taobaocdn.com/tps/i7/T1Ck8rXiXkXXXXXXXX-120-60.gif" />
		</div>
	</div>
	
	<h3>jQuery Code:</h3>
	<pre class="brush: js;">
	$(function(){
		$("#trigger4").switchable("#panel4 > div > img", {
			triggerType: "click",
			effect: "scroll",
			steps: 3,
			visible: 3
		}).autoplay().carousel().mousewheel();
		
		var api4 = $("#trigger4").switchable();
		$("#next4").click(function(){
			api4.next();
		});
		$("#prev4").click(function(){
			api4.prev();
		});
	});
	</pre>
</div>

<p class="copyright">
<script type="text/javascript" src="http://s122.cnzz.com/stat.php?id=1946178&web_id=1946178&show=pic1"></script>
&copy;2010 IlikejQuery.com
</p>
</body>
</html>
